<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <script text="text/javascipt" src="../../JS/vue.js">
      初识Vue
    </script>
  </head>
  <body>
    <!-- Vue 的特点
     1、采用组件化模式，提高代码复用率，更容易维护
     2、声明式编码，让编码人员无需直接操作Dom，提高编码效率
     3、使用虚拟Dom+Diff算法，尽量复用Dom节点


     声明式代码
       <ul id="list">
        <li v-for="p in persons">{{p.id}} - {{p.age}} - {{p.name}}</li>
      </ul>

     命令式代码
       准备html字符串  
        let htmlStr = ""; 
       遍历数据拼接html字符串 
         persons.foreach((p) => {  htmlStr += `<li>${p.id}</li>-<li>${p.age}</li>-<li>${p.name}</li>`;}); 
       获取list元素 
         let list = document.getElementById("list"); 
       修改Dom 
         list.innerHTML += htmlStr; 
        
    1、想让Vue工作，就必须创建一个Vue实例，且要配置一个对象
    2、root容器里的代码依然符合html规范，只不过混入了一些特殊的vue语法
    3、root容器里的代码被称为[Vue模板]
    4、Vue实例与模板一一对应
    5、真是开发中只有一个Vue实例，并且会配合着组件一起使用
    6、{{}}中的要写js表达式，且{{}}可以自动读取data中的所有数据
    7、一旦data中的数据发生改变，那么模板(页面)中用到该数据的私房也会自动更新(数据驱动视图变化)   
    注意：
    （1）js表达式：一个表达式会产生一个值，可以放在任何一个需要值得地方
    （2）js代码（语句）
      -->

    <div id="root">
      <h2>Hello,{{name}}</h2>
    </div>

    <script>
      Vue.config.productionTip = false; //阻止 vue 在启动时生产的提示
      new Vue({
        el: "#root", //el用于指定当前Vue实例为哪个容器服务,之通常为css选择器字符串
        //document.getElementById("root"),
        data: {
          //data中用于存储数据，数据供el所指定的容器去使用。值暂时写成对象的形式
          name: "莫楼",
        },
      });
    </script>
  </body>
</html>
